<template>
   <div class="nearby">
        <h3 class="nearby_title">附近店铺</h3>
        <router-link v-for="item in nearbyList" :key="item.id" 
         :to="{path:`/Shop/${item._id}`,query: {shanmu: JSON.stringify(item)}}"  >
          <ShopInfo  :item="item" />
        </router-link>
        
      </div>
</template>
//路由传参时,query配合path,参数显示在url,刷新页面数据不会丢失,prarms配合name(配合path会导致数据丢失),刷新页面数据会丢失,参数不显示在url,传递对象时,先把对象转换成json格式,接收的时候再转换成js格式
<script>
import { ref } from '@vue/reactivity'
import { get } from '../../untils/request'
import ShopInfo from '@/components/ShopInfo.vue'
//获取附近店铺功能
const useNearbyListEffect = () => {
      const nearbyList = ref([])
      const getNearbyList = async () => {
      const result = await get('/api/shop/hot-list')
      if(result?.errno === 0 && result?.data?.length) {
        nearbyList.value = result.data
      }
    }

    return { nearbyList,getNearbyList }
}

export default {
    name: "Nearby",
    setup() {
        const { nearbyList, getNearbyList } = useNearbyListEffect();
        getNearbyList();
        console.log(nearbyList);
        return { nearbyList };
    },
    components: { ShopInfo }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
.nearby{
  &_title{
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  a{
    text-decoration: none;
  }
}
</style> 